/*
 * @Description: script.js
 * @Author: rendc
 * @Date: 2025-05-15 10:27:38
 * @LastEditors: rendc
 * @LastEditTime: 2025-05-15 10:27:43
 */
// js能做什么
// 1. ES JavaScript的核心 基础语法 变量 方法等
function updateName () {
  alert("1")
  // 方法体
  console.log('🤡 CC - updateName已执行');
  // 修改按钮的文字，将“按钮”，修改为“确定”
  console.log('🤡 CC - updateName - btn:', btn.textContent);
  btn.textContent = "确定";
  console.log('🤡 CC - updateName - btn:', btn.textContent);
}
// 获取span1标签
let span1 = document.getElementById("span1");

function changState () {
  // console.log('🤡 CC - changState - span1:', span1);
  let text = span1.textContent;
  // console.log('🤡 CC - changState - text:', text);
  if (text == "☀️") {
    span1.textContent = "🌛";
    btn2.textContent = "切换日间模式";
  } else {
    span1.textContent = "☀️";
    btn2.textContent = "切换夜间模式";
  }
}
// 2. DOM  文档对象模型
// document
// 3. BOM  浏览器对象模型
// 根据元素id寻找元素
let btn = document.getElementById("btn1");
// 这里用的是 Turbo Console Log 插件输出的
// console.log('🤡 CC - btn:', btn);
// 给按钮设置点击事件(函数) - 添加 事件 监听器
// 第一个参数：要监听的事件名
// 第二个参数：要监听的事件触发后，执行的方法
btn.addEventListener("click", updateName)
// 浏览器的控制台输出 
// console.log("document:", document)
// 浏览器的弹窗输出
// alert("document:" + document)
// 根据id寻找按钮
let btn2 = document.getElementById("btn2");
// console.log('🤡 CC - btn2:', btn2);
// 给按钮2绑定点击事件
btn2.addEventListener("click", changState);